<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>导航栏设置</span>
        <el-button style="float: right" type="primary" @click="dialogFormVisible = true">添加导航</el-button>
      </div>
      <el-table
        :data="list"
        style="width: 100%"
      >
        <el-table-column
          label="id"
          width="180"
        >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="标题"
          width="180"
        >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.title }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="链接地址"
          width="180"
        >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.link }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          width="180"
        >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.add_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="150px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row);dialogFormVisibleEdit = true"
            >编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--    //添加导航栏-->
    <el-dialog :visible.sync="dialogFormVisible" title="添加导航栏">
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth" label="名称">
          <el-input v-model="form.Title" autocomplete="off"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="链接">
          <el-input v-model="form.Link" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false;addnavs()">确 定</el-button>
      </div>
    </el-dialog>

    <!--    //编辑导航栏-->
    <el-dialog :visible.sync="dialogFormVisibleEdit" title="编辑导航栏">
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth" label="名称">
          <el-input v-model="form.title" autocomplete="off"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="链接">
          <el-input v-model="form.link" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleEdit = false;putNav()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import {getNavList,getNavLists, addNav, delNav, PutNav} from "@/api/nav"
import { getNavList, delNav, addNav, editNav } from './api/api'

export default {
  data() {
    return {
      list: [],
      dialogFormVisible: false,
      dialogFormVisibleEdit: false,
      form: {
        Title: '',
        Link: ''
      },
      formLabelWidth: '120px'
    }
  },
  created() {
    this.getNav()
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
      this.form = JSON.parse(JSON.stringify(row))
    },
    handleDelete(index, row) {
      console.log(row, '-----')
      if (row.isDelete != 1) {
        delNav({ id: row.id }).then(x => {
          console.log(x)
          if (x.code == '20000') {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '删除失败',
              type: 'error'
            })
          }
          this.getNav()
        })
      } else {
        this.$message({ type: 'error', message: '不能删除' })
      }
      console.log(index, row)
    },
    getNav() {
      getNavList().then(x => {
        console.log(x)
        this.list = x.data
      })
    },
    addnavs() {
      console.log(this.form)
      addNav(this.form).then(x => {
        console.log(x)
        this.getNav()
      })
    },
    putNav() {
      console.log(this.form)
      editNav(this.form).then(x => {
        console.log(x)
        this.getNav()
      })
    }
  }
}
</script>
